<template>
	<div>
    <div id="container"></div>
    <div class="button-group">
        <input type="button" class="button" value="是否显示" @click="move"/>
        <input type="button" class="button" value="开始动画" @click="move"/>
        <input type="button" class="button" value="停止动画" @click="stop"/>
    </div>
	</div>
</template>

<script>
import AMap from 'AMap'
export default {
  data () {
    return {
      markers: [],
      car: Object,
      lineArr: [],
      map: Object
    }
  },
  methods: {
    getLocation (address) {
      let x = ''
      let y = ''
      let p = this.$http.get('http://restapi.amap.com/v3/geocode/geo?address=' + address + '&output=json&key=05d8c66c8d827bd7ed8559acccd704ce').then((response) => {
        if (response.body.count > 0) {
          let temp = response.body.geocodes[0].location.split(',')
          x = temp[0].trim()
          y = temp[1].trim()

          if (x !== '' && y !== '') {
            this.markers.push({position: [x, y], title: address, label: {offset: new AMap.Pixel(10, -22), content: address}})
          }
        }
      }, (response) => {
        console.log('error')
      })
      return p.promise
    },
    move () {
      this.car.moveAlong(this.lineArr, 50000)
    },
    stop () {
      this.car.stopMove()
    }
  },
  ready () {
    let self = this
    self.map = new AMap.Map('container', {
      resizeEnable: true
    })
    let addrs = []
    // let lineArr = []
    let p = []
    // let car
    // let markers = []
    addrs.push('浙江富阳公司B')
    addrs.push('杭州分拨中心')
    addrs.push('温州分拨中心')
    addrs.push('浙江温州永嘉桥下公司')
    /* Promise.all([
      self.getLocation('浙江富阳公司B'),
      self.getLocation('杭州分拨中心'),
      self.getLocation('温州分拨中心'),
      self.getLocation('浙江温州永嘉桥下公司')
    ]).then(response => {})*/
    addrs.forEach((address, index) => {
      p.push(self.getLocation(address))
    })
    Promise.all(p).then((data) => {
      self.markers.forEach((marker, index) => {
        let icon = '../../static/images/map/mark_s.png'
        if (index === 0) {
          icon = '../../static/images/map/start.png'
        } else if (index === (self.markers.length - 1)) {
          icon = '../../static/images/map/end.png'
        }
        if (index === 0) {
          self.car = new AMap.Marker({
            icon: '../../static/images/map/car.png',
            position: marker.position,
            map: self.map,
            offset: new AMap.Pixel(-26, -13),
            autoRotation: true
          })
        }
        let mk = new AMap.Marker({
          icon: icon,
          // content: '<div class="marker">'+(parseInt(index) + 1)+'</div>',
          position: marker.position,
          map: self.map,
          title: marker.title,
          animation: 'AMAP_ANIMATION_DROP' // 点标记的动画效果,BOUNCE(跳动)
          // label:marker.label
        })
        let infoWindow = new AMap.InfoWindow({
          content: marker.title,
          offset: {x: 0, y: -30}
        })
        mk.on('mouseover', e => {
          infoWindow.open(self.map, mk.getPosition())
        })
        mk.on('mouseout', e => {
          infoWindow.close(self.map, mk.getPosition())
        })
        self.lineArr.push(marker.position)
      })
      let polyline = new AMap.Polyline({
        path: self.lineArr,            // 设置线覆盖物路径
        strokeColor: '#3366FF',   // 线颜色
        strokeOpacity: 1,         // 线透明度
        strokeWeight: 2,          // 线宽
        strokeStyle: 'dashed',     // 线样式solid（实线）
        strokeDasharray: [10, 5], // 补充线样式
        geodesic: true           // 绘制大地线
      })
      self.map.setFitView() // 地图自适应
      polyline.setMap(self.map)
      self.car.moveAlong(self.lineArr, 50000)

      /* map.plugin(['AMap.ToolBar'], () => {
        map.addControl(new AMap.ToolBar())
      })
      if (window.location.href.indexOf('&guide=1') !== -1) {
        map.setStatus({scrollWheel: false})
      }*/
    })
  }
}

</script>

<style lang="less">
@import '../less/map/main1119.less';
</style>